---
title: Tina CMS & Astro
description: Agrega contenido a tu proyecto Astro usando Tina como CMS
type: cms
stub: false
service: Tina CMS
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import Grid from '~/components/FluidGrid.astro'
import Card from '~/components/ShowcaseCard.astro'

[Tina CMS](https://tina.io/) es un sistema de gestión de contenido sin servidor respaldado por Git.

## Integración con Astro
 
Para empezar, necesitarás un proyecto Astro existente.

1. Ejecuta el siguiente comando para instalar Tina en tu proyecto Astro.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx @tinacms/cli@latest init
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpx @tinacms/cli@latest init
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn dlx @tinacms/cli@latest init
      ```
      </Fragment>
    </PackageManagerTabs>

    - Cuando se te pregunte ingresar un Cloud ID, presione <kbd>Enter</kbd> para omitir. Generará uno más tarde si desea usar Tina Cloud.
    - Cuando se te pregunte "¿Qué framework estás usando?", escoge **Otro**.
    - Cuando se te pregunte donde se almacenan los archivos del directorio public, presione <kbd>Enter</kbd>.

    Depués de haber terminado lo anterior, deberías tener una carpeta `.tina` en la raíz de tu proyecto y un archivo `hello-world.md` generado en `content/posts/hello-world.md`.
 
2. Cambia el script `dev` en `package.json`:

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```json del={4} ins={5}
      // package.json
      {
          "scripts": {
              "dev": "astro dev",
              "dev": "tinacms dev -c \"astro dev\""
          }
      }
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```json del={4} ins={5}
      // package.json
      {
          "scripts": {
              "dev": "astro dev",
              "dev": "tinacms dev -c \"astro dev\""
          }
      }
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```json del={4} ins={5}
      // package.json
      {
          "scripts": {
              "dev": "astro dev",
              "dev": "tinacms dev -c \"astro dev\""
          }
      }
      ```
      </Fragment>
    </PackageManagerTabs>

3. Ahora TinaCMS está configurado en modo local. Prueba esto ejecutando el script `dev`, luego navega a `/admin/index.html#/collections/post`.

    Editando el archivo "Hello, World!" actualizará el archivo `content/posts/hello-world.md` en el directorio de tu proyecto.

4. Configura tus colecciones Tina editando la propiedad `schema.collections` en `.tina/config.ts`.

    Por ejemplo, puedes agregar una propiedad frontmatter requerida "date posted"(fecha de publicación) a nuestros posts:

    ```js title=".tina/config.ts" ins={35-40}
    import { defineConfig } from "tinacms";

    // Tu proveedor de hosting probablemente exponga esto como una variable de entorno
    const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main";

    export default defineConfig({
      branch,
      clientId: null, // Obtén esto de tina.io
      token: null, // Obtén esto de tina.io
      build: {
        outputFolder: "admin",
        publicFolder: "public",
      },
      media: {
        tina: {
          mediaRoot: "images",
          publicFolder: "public",
        },
      },
      schema: {
        collections: [
          {
            name: "posts",
            label: "Posts",
            path: "src/content/posts",
            format: 'mdx',
            fields: [
              {
                type: "string",
                name: "title",
                label: "Title",
                isTitle: true,
                required: true,
              },
              {
                type: "datetime",
                name: "posted",
                label: "Date Posted",
                required: true,
              },
              {
                type: "rich-text",
                name: "body",
                label: "Body",
                isBody: true,
              },
            ],
          },
        ],
      },
    });
    ```

    Aprende más sobre las colecciones Tina [en la documentación de Tina](https://tina.io/docs/reference/collections/).

5. En producción, TinaCMS puede hacer commit de los cambios directamente a tu repositorio de GitHub. Para configurar TinaCMS para producción, puedes elegir usar [Tina Cloud](https://tina.io/docs/tina-cloud/) o auto-hospedar la [Tina Data Layer](https://tina.io/docs/self-hosted/overview/). Puedes [leer más sobre el registro para Tina Cloud](https://app.tina.io/register) en la documentación de Tina.

## Recursos Oficiales

- [Guía de integración de TinaCMS con Astro](https://tina.io/docs/frameworks/astro/).

## Recursos de la comunidad 

- [Plantilla de inicio de Tina y Astro con edición visual](https://github.com/dawaltconley/tina-astro) por Jeff See y Dylan Awalt-Conley
- [Plantilla de inicio de Tina con Astro](https://github.com/tombennet/astro-tina-starter/tree/main) por Tom Bennet
- [Utilizando la Optimización de Imágenes de Astro con Tina](https://joschua.io/posts/2023/08/16/how-to-use-astro-assets-with-tina-cms/)

## Temas

<Grid>
  <Card title="Resume01" href="https://astro.build/themes/details/resume-01/" thumbnail="resume01.png"/>
</Grid>